import React, { memo, useState } from 'react'

import { OperateBtnsWrapper } from './style'

import {  Input, Button } from 'antd';

const OperateBtns = memo((props) => {

  const {btnList} = props

  let [username,setUsername] = useState('')
  let [realname,setRealname] = useState('')
  const clickFn = (clickFn)=>{
    const {operateBn} = props
    let form = {
      username: username,
      realname: realname,
    }
    if (clickFn === 'reset') {
      form.username = ''
      form.realname = ''
      setUsername('')
      setRealname('')
    }
    operateBn(clickFn,form)
  }
  return (
    <OperateBtnsWrapper>
      <Input placeholder="请输入用户名" value={username} onChange={e=>setUsername(e.target.value)}/>
      <Input placeholder="请输入真是姓名" value={realname} onChange={e=>setRealname(e.target.value)}/>
      {btnList.map(item=>
        <Button key={item.text} className={item.type} icon={item.icon} htmlType="button" onClick={e=>clickFn(item.clickFn)}>
          {item.text}
        </Button>
      )}
    </OperateBtnsWrapper>
  )
})

export default OperateBtns